<template>
    <div class="component-notice">
        <modal
            :show='show'
            :maskClose='false'
            @close='emitClose'>
            <div class="component-notice__title">{{notice.title || '公告'}}</div>
            <div class="component-notice__content">{{notice.notice}}</div>
            <footer class="component-notice__buttons">
                <span :class='{"wait" : !over}' class="button short pure" @click="emitClose">我知道了<i v-if='!over'> {{second}} </i></span>
            </footer>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { getQueryString } from '../utils/utils'
    import { allApi, reportApi } from '../api/api'
    import moment from 'moment'

    export default {
        name:'Notice',
        components:{
            modal,
        },
        filters:{

        },
        props: {
            number: {
                type: String,
                default:''
            },
        },
        data() {
            return {
                all:false,
                info:{},
                second:'',
                show:false,
                over:false,
                notice:{},
                carrier:{},
                ec:{}
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            emitClose(){
                allApi.setRead({
                    noticeId:this.notice.noticeId
                })
                .catch(error=>{
                    console.error(error)
                })
                this.show = false
            },
            countDown(){
                const time = setTimeout(()=>{
                    if(this.second == 0){
                        this.over = true
                        return
                    }
                    this.second --
                    this.countDown()
                },1000)
            },
        },
        created(){
            if(getQueryString().from == 'app') return
                
            allApi.noticeShow()
            .then(result=>{
                if(!result) return 
                this.notice = result
                this.second = result.second || 5
                if(result.notice != ''){
                    this.show = true
                    this.countDown()
                }
            })
            .catch(error => {
                console.error(error)
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-notice{
        .component-notice__title{
            @extend %font-title;
            color:$importColor;
            padding-bottom: 16px;
        }
        .component-notice__content{
            @extend %font-caption;
        }
        .component-modal__main{
            padding-bottom:14px;
            padding-right:16px;
        }
        .component-notice__buttons{
            display: flex;
            justify-content: flex-end;
            .wait{
                pointer-events:none;
                color:$grayLight;
            }
        }
    }

</style>
